<script>
import tooltipComponent from "./tooltip";
import titleComponent from "./title";
import legendComponent from "./legend";
import globalComponent from "./global";
import labelComponent from "./label";
export default {
  name: "PieTool",
  components: {
    tooltipComponent,
    titleComponent,
    legendComponent,
    globalComponent,
    labelComponent,
  },
  inject: ["father"],
  data() {
    return {
      activeName: "1",
      options: [
        {
          title: "全局属性",
          name: "1",
          type: "",
          render: () => <globalComponent />,
        },
        {
          title: "值标签",
          name: "2",
          type: "",
          render: () => <labelComponent />,
        },
        {
          title: "提示框",
          name: "3",
          type: "tooltip",
          render: () => <tooltipComponent />,
        },
        {
          title: "图例",
          name: "4",
          type: "legend",
          render: () => <legendComponent />,
        },
        {
          title: "标题",
          name: "5",
          type: "title",
          render: () => <titleComponent />,
        },
      ],
    };
  },
  mounted() {},
  methods: {
    showHide(type) {
      this.father.echartsOptions[type].show =
        !this.father.echartsOptions[type].show;
    },
  },
  render() {
    return (
      <el-collapse v-model={this.activeName} accordion>
        {this.options.map((item) => {
          return (
            <el-collapse-item title={item.title} name={item.name}>
              {item.type ? (
                <template slot="title">
                  <i
                    class={[
                      "header-icon",
                      this.father.echartsOptions[item.type].show
                        ? "el-icon-open"
                        : "el-icon-turn-off",
                    ]}
                    onClick={($event) => {
                      this.showHide(item.type);
                      $event.stopPropagation();
                    }}
                  ></i>
                  <span> {item.title}</span>
                </template>
              ) : (
                ""
              )}
              {item.render()}
            </el-collapse-item>
          );
        })}
      </el-collapse>
    );
  },
};
</script>

<style scoped>
i {
  margin-right: 15px;
}
</style>